<template>
  <div class="app-container">
    <vaeTable
      ref="vaeTable"
      :data="list"
      :option="option"
      v-model="form"
      :page="page"
      :loading="listLoading"
      @pagination="pagination"
      @on-load="onLoad"
      @row-save="rowSave"
      @row-edit="rowEdit"
      @row-delete="rowDelete"
      @open="open"
    >
    </vaeTable>
  </div>
</template>

<script>
import {
  getCookieList,
  getCookieInfo,
  getCookieInsert,
  getCookieDelete,
  getCookieUpdate,
} from "@/api/cookie";
import vaeTable from "@/components/vae-table";
import Dialog from "@/components/Dialog";
import vaeForm from "@/components/vae-form";
import list from "@/mixin/list";
export default {
  components: { vaeTable, vaeForm, Dialog },
  mixins: [list],
  data() {
    return {
      form: {
        cookieName: "",
        cookieContent: "",
        cookieImg: "",
        recommend: "",
      },
      option: {
        contralWidth: "",
        contralSize: "",
        labelWidth: "120px",
        column: [
          {
            label: "菜品名称",
            prop: "cookieName",
            width: 120,
            type: "input",
            rules: [{ required: true, message: "请输入名字", trigger: "blur" }],
          },
          {
            label: "菜品图片",
            prop: "cookieImg",
            type: "img",
            width: 120,
            rules: [{ required: true, message: "请传入图片", trigger: "change" }],
          },
          {
            label: "菜品简介",
            prop: "cookieContent",
            type: "input",
            subtype: "textarea",
          },
          {
            label: "是否推荐",
            prop: "recommend",
            width: 120,
            type: "select",
            options: [
              { label: "是", value: 1 },
              { label: "否", value: 0 },
            ],
            dicData: [
              { key: 1, value: "是" },
              { key: 0, value: "否" },
            ],
          },
        ],
      },
      list: null,
      listLoading: true,
    };
  },
  created() {},
  methods: {
    onLoad() {
      this.listLoading = true;
      getCookieList(this.query).then((res) => {
        if (res.status == 1) {
          this.list = res.data.data;
          this.page.page = res.data.page.page;
          this.page.limit = res.data.page.pageSize;
          this.page.total = res.data.page.total;
        }
        this.listLoading = false;
      });
    },
    // 点击按钮前触发
    open({ row, type }) {
      if (type == "info" || type == "edit") {
        getCookieInfo({ id: row.cookieId }).then((res) => {
          if (res.status == 1) {
            this.form = res.data;
          }
        });
      }
    },
    // 点击新增提交
    rowSave(done) {
      console.log(this.form)
      getCookieInsert(this.form).then((res) => {
        if (res.status == 1) {
          this.onLoad();
          this.$message({
            message: res.msg,
            type: "success",
          });
          done();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 编辑提交
    rowEdit(done) {
      getCookieUpdate(this.form).then((res) => {
        if (res.status == 1) {
          this.show = false;
          this.onLoad();
          this.$message({
            message: res.msg,
            type: "success",
          });
          done();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 删除
    rowDelete({ row }) {
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        getCookieDelete({ id: row.cookieId }).then((res) => {
          if (res.status == 1) {
            this.onLoad();
            this.$message({
              message: res.msg,
              type: "success",
            });
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
</style>